<script>
import {defineComponent} from 'vue'
import {TagName} from "@ginstone/nga-api/dist/src/bbscode/TagName";
import NgaAttach from "@/components/content/bbscode/NgaAttach.vue";
import NgaTd from "@/components/content/bbscode/NgaTd.vue";
import NgaImg from "@/components/content/bbscode/NgaImg.vue";
import NgaCollapse from "@/components/content/bbscode/NgaCollapse.vue";
import NgaText from "@/components/content/bbscode/NgaText.vue";
import UserLink from "@/components/common/link/UserLink.vue";
import NgaPid from "@/components/content/bbscode/NgaPid.vue";
import NgaTid from "@/components/content/bbscode/NgaTid.vue";
import NgaLink from "@/components/content/bbscode/NgaLink.vue";
import NgaCodeArea from "@/components/content/bbscode/NgaCodeArea.vue";


/**
 * 渲染一组bbsTag ，返回一个节点数组
 * @param tags 标签数组
 */
const render = (tags) => {
  if (!tags) {
    return []
  }
  return tags.map(tag => {
    if (renders.hasOwnProperty(tag.name)) {
      // 如果配置了渲染方法，使用该方法
      return renders[tag.name](tag)
    } else {
      // 未配置方法的使用原始渲染
      return renders.raw(tag)
    }
  })
}
// 每种标签的渲染方式
const renders = {}
// 无法识别的标签的渲染方式
renders.raw = ({raw}) => <span>{raw}</span>
// 文本内容的渲染方式
renders.text = ({raw}) => <nga-text text={raw}></nga-text>
renders[TagName.attach] = ({children}) => <nga-attach text={children[0].text}></nga-attach>
renders[TagName.quote] = ({children}) => <div className="nga-quote">{render(children)}</div>
renders[TagName.heading] = ({children}) => <h4>{render(children)}</h4>
renders[TagName.list] = ({children}) => <ul>{render(children)}</ul>
renders[TagName.li] = ({children}) => <li>{render(children)}</li>
renders[TagName.del] = ({children}) => <span className="deleted">{render(children)}</span>
renders[TagName.bold] = ({children}) => <span className="bold">{render(children)}</span>
renders[TagName.underline] = ({children}) => <span className="underline">{render(children)}</span>
renders[TagName.italic] = ({children}) => <span className="italic">{render(children)}</span>
renders[TagName.right] = ({children}) => <span className="float-right">{render(children)}</span>
renders[TagName.left] = ({children}) => <span className="float-left">{render(children)}</span>
renders[TagName.color] = ({children, params}) => <span style={'color: ' + params}>{render(children)}</span>
renders[TagName.font] = ({children, params}) => <span style={'font-family:' + params}>{render(children)}</span>
renders[TagName.size] = ({children, params}) => <span style={'font-size:' + params}>{render(children)}</span>
renders[TagName.align] = ({children, params}) => <span style={"display:block;text-align:" + params}>{render(children)}</span>
renders[TagName.table] = ({children}) => <table className="nga-table">
  <tbody>{render(children.filter(i => i.name === TagName.tr))}</tbody>
</table>
renders[TagName.tr] = ({children}) => <tr>{render(children.filter(i => i.name === TagName.td))}</tr>
renders[TagName.td] = ({children, params}) => <nga-td params={params}>{render(children)}</nga-td>
// todo 使用浏览器自带功能播放视频
renders[TagName.flash] = ({children}) => <iframe src={'/attachments' + children[0].text.substring(1)} sandbox=""/>
renders[TagName.img] = ({children}) => <nga-img src={children[0].text}/>
renders[TagName.collapse] = ({children, params}) => <nga-collapse title={params}>{render(children)}</nga-collapse>
renders[TagName.uid] = ({children, params}) => <user-link bracket userId={Number(params)}>{render(children)}</user-link>
renders[TagName.pid] = ({children, params}) => <nga-pid params={params}>{render(children)}</nga-pid>
renders[TagName.tid] = ({children, params}) => <nga-tid tid={Number(params)}>{render(children)}</nga-tid>
renders[TagName.url] = ({children, params}) => <nga-link url={params}>{render(children)}</nga-link>
renders[TagName.code] = ({children, params}) => <nga-code-area data={children[0].text}/>
renders[TagName.randomblocks] = ({children, params}) => <el-carousel trigger="click">{render(children)}</el-carousel>
renders[TagName.randomblock] = ({children, params}) => <el-carousel-item>{render(children)}</el-carousel-item>
renders[TagName.at] = ({children, params}) => {
  const text = children[0].text
  const arg = Number(params);
  if (isNaN(arg)) {
    return <user-link bracket username={text}>@{text}</user-link>
  }
  return <user-link bracket user-id={arg}>@{text}</user-link>
}
renders[TagName.dice] = ({children, params}) => <div className="dice-div"><span className="dice-result">{render(children)}</span></div>


export default defineComponent({
  name: "ContentRender",
  setup(props) {
    // 返回渲染函数
    return () => render(props.data)
  },
  components: {NgaAttach, NgaTd, NgaImg, NgaCollapse, NgaText, UserLink, NgaPid, NgaTid, NgaLink, NgaCodeArea},
  props: {
    data: {type: Array}
  }
})
</script>

<template>
</template>

<style scoped>

</style>